<template>
    <div class="register">
        <el-card shadow="hover">
            <div slot="header">
                <span>注册</span>
            </div>

            <el-form
                :model="registerForm"
                :rules="registerFormRules"
                ref="registerFormRef"
                label-position="top"
                size="small"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="registerForm.username"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input
                        type="password"
                        v-model="registerForm.password"
                    ></el-input>
                </el-form-item>

                <el-form-item label="真实姓名" prop="relname">
                    <el-input v-model="registerForm.relname"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">注册</el-button>
                </el-form-item>
            </el-form>

            <el-row type="flex" justify="end">
                <el-link type="primary" :underline="false" href="/login"
                    >已有账号？去登录</el-link
                >
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            registerForm: {
                username: '',
                password: '',
            },
            registerFormRules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'change',
                    },
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'change',
                    },
                ],
                relname: [
                    {
                        required: true,
                        message: '请输入用户真实姓名',
                        trigger: 'change',
                    },
                ],
            },
        };
    },
    methods: {
        async submit() {
            const res = await this.$http.post('/register', this.registerForm);
            console.log(res);
            if (res.code !== 201) {
                this.$message.error(res.message);
                return;
            }
            // 跳转到首页
            this.$router.push('/login');
        },
    },
};
</script>

<style lang="less" scoped>
.register {
    background-color: #eee;
    min-height: 100vh;
}

.el-card {
    width: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
